<template>
    <div class="map-container">
      <div id="b" style="margin-left:160px">
        <el-col :offset="5" :span="18">
          <el-row>
            <el-col :offset="12" :span="12">
              <a class="header_a">适老化及无障碍</a>
              <a class="header_a">请登录</a>
              <span class="header_a">或</span>
              <a class="header_a">免费注册</a>
              <a class="header_a">消息</a>
              <a class="header_a">查看订单</a>
              <a class="header_a">积分商城</a>
              <a class="header_a">联系客服</a>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row>
            <el-col :span="19">
              <img class="header_img" style="width: 136px;height: 54px" src="https://s.qunarzz.com/f_cms/2021/1638865973476_447461838.png"/>
              <a class="header_a2">首页</a>
              <a class="header_a2">机票</a>
              <a class="header_a2">酒店</a>
              <a class="header_a2">团购</a>
              <a class="header_a2">度假</a>
              <a class="header_a2">邮轮</a>
              <a class="header_a2">门票</a>
              <a class="header_a2">火车票</a>
              <a class="header_a2">攻略</a>
              <a class="header_a2">当地人</a>
              <a class="header_a2">汽车票</a>
            </el-col>
          </el-row>
        </el-col>
      </div>
      <div>
        <el-col class="el-col-offset-2">
          <template >
            <el-table :data="trainlist" stripe style="width: 79%;margin-top: 0" >
              <el-table-column prop="trainNumber"label="车次/类型" width="160"></el-table-column>
              <el-table-column prop="trainSname" label="始发站" width="160"></el-table-column>
              <el-table-column prop="trainEname" label="终点站" width="160"></el-table-column>
              <el-table-column prop="trainStime" label="始发时间"width="160"></el-table-column>
              <el-table-column prop="trainEtime" label="终点时间"width="160"></el-table-column>
              <el-table-column prop="trainPrice" label="参考票价"width="160"></el-table-column>
              <el-table-column prop="" label="(购买/抢票)">
                <template slot-scope="scope">
                  <el-button type="success" plain @click="tobuy(scope.row)">购买/抢票</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-col>
      </div>
    </div>
</template>

<script>
    export default {
        name: "traindetails",
      data() {
        return {
          trainlist:[
            {
              trainId: "",
              trainSname: "",
              trainEname: "",
              trainStime: " ",
              trainEtime: " ",
              trainNumber: "",
              trainSeat: "",
              trainPrice: "",
              trainType: ""
          }
          ],
        }
      },
      methods:{
          tobuy(row){
            console.log()
            this.$router.push({path:'/trainorder',query:{trainId:row.trainId}});


          },

      },
      mounted() {
          //this.trainShows();
        this.trainlist=this.$route.params.data
        // console.log(this.trainlist)
        // console.log(this.$route.params.data)
      }
    }
</script>

<style scoped>
.map-container{
  background-image: url('../assets/3.jpg');
  background-size: cover;
  background-position: center center;
//opacity: 0.9;
  width: 100%;
  height: 700px;
}
#b{
  width: 1200px;
  height:90px;

}

.header_a{
  font-size: 12px;
  margin-top: 0px;
  margin-left: 5px;
}
.header_img{
  float: left;
  margin-bottom: 0px;
}
.header_a2{
  font-size: 15px;
  font-family: "Hiragino Sans GB";
  float: left;
  margin-right: 12px;
  margin-top: 30px;
}
</style>
